<template>
  <div class="box">
    <div class="f1 banner1">
      <div class="f1_content">
        <!-- <div class="virtual"></div> -->
        <div class="f1_content_right">
          <div class="title">
            <h1>数字金融</h1>
            <h1>赋能产业发展</h1>
          </div>
          <Label></Label>
        </div>
      </div>
    </div>

    <div class="f2">
      <div class="f2_content">
        <div class="title">
          产品推荐
          <p @click="goProduct">查看更多</p>
        </div>
        <div class="recommend">
          <div
            class="recommendItem"
            v-for="item in recommend"
            :key="item.index"
            @click="goApply(item)"
          >
            <div class="recommendItemF1">
              <img v-show="item.index == 1" :src="item.file" alt="" />
              <img v-show="item.index == 2" :src="item.file" alt="" />
              <img
                v-show="item.index == 3"
                src="@/assets/home/0001.png"
                alt=""
                style="width: 1.0417rem; height: 0.4167rem"
              />
              <p v-show="item.index == 1">重庆进出口担保</p>
            </div>
            <div class="recommendItemF2">
              <h1>{{ item.productname | getName }}</h1>
              <h1 style="font-size: 0.1042rem">{{ item.productname | getName2 }}</h1>
            </div>
            <div class="recommendItemF3">
              <ul>
                <li>
                  <h6>{{ item.showdata1 }}</h6>
                  <h5>{{ item.show1 }}</h5>
                </li>
                <li>
                  <h6>{{ item.showdata2 }}</h6>
                  <h5>{{ item.show2 }}</h5>
                </li>
                <li>
                  <h6 style="color: rgb(245, 154, 35)">{{ item.showdata3 }}</h6>
                  <h5>{{ item.show3 }}</h5>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="title">商务信用</div>
        <div class="list">
          <ul>
            <li :class="{ active: row == 3 }" @click="row = 3">
              <img src="@/assets/home/组32.png" alt="" />
              <h4>信用报告</h4>
            </li>
            <li :class="{ active: row == 4 }" @click="row = 4">
              <img src="@/assets/home/组33.png" alt="" />
              <h4>风险扫描</h4>
            </li>
            <li :class="{ active: row == 2 }" @click="row = 2">
              <img src="@/assets/home/组31.png" alt="" />
              <h4>信用信息查询</h4>
            </li>
          </ul>
        </div>

        <div class="content" v-show="row == 3">
          <div class="contentLeft">
            <img src="@/assets/home/组40.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>信用报告</h3>
            <ul>
              <li>多维度企业画像，提供企业全面、准确的综合信用信息。</li>
              <li>全面数据分析，详尽信用报告下载，快速洞察目标企业商业信用。</li>
              <li>判断企业信用等级，预测企业未来经营发展情况。</li>
            </ul>
            <div class="btn" @click="goReport">去查询</div>
          </div>
        </div>
        <div class="content" v-show="row == 4">
          <div class="contentLeft">
            <img src="@/assets/home/组41.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>风险扫描</h3>
            <ul>
              <li>
                一键知风险，自定义风险等级，专业风险预警模型，经过人工智能算法对海量数据进行运算并亮灯。
              </li>
              <li>快速了识别企业潜在经营风险，帮助您直观了解企业的信用风险水平。</li>
            </ul>
            <div class="btn" @click="goBrran">去扫描</div>
          </div>
        </div>
        <div class="content" v-show="row == 2">
          <div class="contentLeft">
            <img src="@/assets/home/组39.png" alt="" />
          </div>
          <div class="contentRight">
            <h3>信用信息查询</h3>
            <ul>
              <li>
                全面的企业信息，提供一站式的企业信息查询服务，涵盖工商信息、财务信息、人员信息、股权结构、法律诉讼等多个方面。
              </li>
              <li>实时的数据更新，依托广泛、权威的数据来源，提供最新、最准确的企业信息。</li>
              <li>提供多样化的查询方式，准确查找企业信息，决策有据可依。</li>
            </ul>
            <div class="btn" @click="goQuery">去查询</div>
          </div>
        </div>
      </div>
      <div class="f3_content">
        <div class="title">平台特色</div>
        <img src="@/assets/home/组36.png" alt="" />
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="visible" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>为了保证体验更多的服务</p>
        <p>{{ title }}</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="visible = false">稍后</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgInvoice()">立即前往</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { loginStatus } from '@/utils'
import Label from '@/components/Label.vue'

export default {
  components: { Label },
  data() {
    return {
      recommend: [
        {
          index: 1,
          productname: '关税保函',
          showdata1: '2000万',
          show1: '最高授信',
          showdata2: '13个月',
          show2: '最长期限',
          showdata3: '2.50%',
          show3: '综合年化成本',
          file: 'http://operate.thunlink.cn//scf202310/20231016/js-6694706977570816.png',
          productcode: 'SF001001',
          id: '6251742771560448'
        },
        {
          index: 2,
          productname: '产业数据贷（应收账款确认函模式）',
          showdata1: '500万',
          show1: '最高授信',
          showdata2: '12个月',
          show2: '期限',
          showdata3: '4.00%-5.00%',
          show3: '融资利率',
          file: 'http://operate.thunlink.cn//scf202407/20240724/%E9%82%AE%E5%82%A8%E9%93%B6%E8%A1%8C-7093744042983424.png',
          productcode: 'SCF012002',
          id: '7057085261103104'
        },
        {
          index: 3,
          productname: '银票贴现融资',
          showdata1: '20000万',
          show1: '最高授信',
          showdata2: '6个月',
          show2: '最长期限',
          showdata3: '1.35%',
          show3: '参考年化',
          file: 'https://operate.thunlink.cn//scf202405/20240530/%E5%B9%B3%E5%AE%89%E9%93%B6%E8%A1%8C-7016014246559744.png',
          producttype: '银票贴现',
          radio: '1.35',
          id: '6660651485298688',
          productcode: 'CAB004006'
        }
      ],
      visible: false,
      title: '',
      row: 3
    }
  },
  mounted() {},
  filters: {
    getName: function (value) {
      if (!value.indexOf('（') == -1) return value
      return value.split('（')[0]
    },
    getName2: function (value) {
      var resu = ''
      if (value.indexOf('（') !== -1) {
        resu = '（' + value.split('（')[1]
      }
      return resu
    }
  },
  methods: {
    async goApply(item) {
      console.log(item)
      let code = item.productcode.substring(0, 3)
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      sessionStorage.setItem('productcode', item.productcode)
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let res = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (res.code == 10000) {
          this.$Message.error(res.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        localStorage.clear()
        if (code == 'SF0') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          localStorage.setItem('productcode', productcode)
          localStorage.setItem('productname', productname)
          localStorage.setItem('id', id)
          // 跳转至关税保函正式申请页
          this.$router.push(`/gsbhzsApplocation`)
        } else if (code == 'CAB') {
          let productcode = item.productcode
          let productname = item.productname
          let producttype = item.producttype
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          localStorage.setItem('producttype', producttype)
          this.$router.push('/sptxApplication')
        } else if (code == 'SCF') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$router.push('/sjghdApplication')
        }
        this.setTime()
      }
    },
    // 跳转至超市中心
    goProduct() {
      localStorage.clear()
      this.$router.push('/productList')
      this.setTime()
    },
    // 判断是否登录及认证
    async isLogin() {},
    //信用信息查询
    async goQuery() {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let res = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (res.code == 10000) {
          this.$Message.error(res.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        this.$router.push('/query/index')
        this.setTime()
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 企业信用报告查询
    async goReport() {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let res = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (res.code == 10000) {
          this.$Message.error(res.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        this.$router.push('/report')
        this.setTime()
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 风险扫描
    async goBrran() {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let res = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (res.code == 10000) {
          this.$Message.error(res.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        this.$router.push('/brran/riskqueryind')
        this.setTime()
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 跳转至登录或者认证
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      let loginState = sessionStorage.getItem('loginState')
      this.visible = false
      if (!loginState) {
        this.$router.push('/login')
        this.setTime()
        return
      }
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTime()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTime()
        return
      }
    },
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    }
  }
}
</script>
<style scoped lang="scss">
.box {
  box-sizing: border-box;
  padding-bottom: 0.4167rem;
  width: 100%;
  background-color: #f5f7fa;
  // .banner {
  //   width: 100%;
  //   height: 3.5938rem;
  //   background: url(@/assets/home/banner.png) no-repeat;
  //   background-size: 100% 100%;
  //   h1 {
  //     position: absolute;
  //     top: 1.7708rem;
  //     left: 1.875rem;
  //     font-size: 0.3125rem;
  //     font-weight: bold;
  //     color: #ffffff;
  //     font-weight: 600;
  //   }
  // }
  .banner1 {
    background: url(@/assets/banner/1.png) no-repeat;
    background-size: 100% 100%;
  }

  .f1 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    height: 3.8333rem;
    .f1_content {
      position: relative;
      display: flex;
      width: 8.4375rem;
      height: 3.2656rem;
      .virtual {
        width: 2.6042rem;
        height: 3.2656rem;
      }
      .f1_content_right {
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title {
          color: #fff;
          margin-left: 0.0781rem;
          width: 57%;
          display: flex;
          flex-direction: column;
          align-items: center;
          h1 {
            font-size: 0.3438rem;
            font-weight: 600;
            margin-bottom: 0.1302rem;
          }
          p {
            font-weight: 100;
            font-size: 0.1458rem;
            line-height: 0.3125rem;
          }
          img {
            cursor: pointer;
            margin-top: 0.1302rem;
            width: 1.3438rem;
          }
        }
      }
    }
  }

  .f2 {
    width: 100%;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.1563rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #181818;
      margin-top: 0.3906rem;
      p {
        font-size: 0.0885rem;
        font-weight: 500;
        color: rgb(63, 109, 241);
        cursor: pointer;
      }
    }
    .f2_content {
      width: 6.25rem;
      margin: 0 auto;
      .recommend {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 1.4063rem;
        margin-top: 0.1042rem;
        .recommendItem {
          box-sizing: border-box;
          padding: 0.1563rem 0.0521rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 1.9792rem;
          height: 100%;
          background: url(@/assets/home/bgc.png) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          .recommendItemF1 {
            img {
              width: 1.0417rem;
              height: 0.2083rem;
            }
            p {
              width: 1.0417rem;
              display: flex;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              padding: 0 0.026rem;
              font-size: 0.0833rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              margin-top: 0.0521rem;
              background: #e2e9fd;
              color: #2960f7;
            }
          }
          .recommendItemF2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            // width: 1.0417rem;
            font-size: 0.1146rem;
            color: #000000;
            font-weight: 600;
          }
          .recommendItemF3 {
            width: 100%;
            height: 0.3125rem;
            ul {
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              li {
                width: 0.5469rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                h6 {
                  font-size: 0.0885rem;
                  color: #029cfc;
                }
                h5 {
                  font-weight: 400;
                  font-size: 0.0833rem;
                  color: #333;
                }
              }
            }
          }
        }
      }
      .list {
        width: 100%;
        height: 0.5208rem;
        border-bottom: 0.0052rem solid #d4e3ec;
        margin-top: 0.1563rem;
        ul {
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          width: 4.4375rem;
          height: 100%;
          display: flex;
          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 0.5729rem;
            height: 100%;
            &.active {
              border-bottom: 0.0156rem solid #0a7be0;
            }
            img {
              width: 0.3125rem;
              height: 0.3125rem;
            }
            h4 {
              font-size: 0.0938rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #181818;
            }
          }
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 1.7969rem;
        margin-top: 0.2083rem;
        .contentLeft {
          width: 2.4323rem;
          height: 1.7969rem;
          img {
            width: 100%;
          }
        }
        .contentRight {
          position: relative;
          box-sizing: border-box;
          width: 3.6875rem;
          height: 1.7969rem;
          padding: 0.1563rem 0.1771rem;
          background-color: #fff;
          margin-bottom: 0.1042rem;
          h3 {
            text-align: center;
            font-size: 0.125rem;
            font-weight: bold;
            color: #000000;
            margin-bottom: 0.0781rem;
          }
          ul {
            box-sizing: border-box;
            padding: 0 0.1771rem;
            li {
              font-size: 0.0833rem;
              font-weight: 400;
              color: #333;
              line-height: 0.2083rem;
            }
          }
          .btn {
            cursor: pointer;
            position: absolute;
            right: 0.2917rem;
            bottom: 0.2031rem;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 0.8333rem;
            height: 0.1979rem;
            background: #0a7be0;
            border-radius: 0.0208rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
    .f3_content {
      width: 6.25rem;
      margin: 0 auto;
      img {
        width: 100%;
        margin-top: 0.2083rem;
      }
    }
  }
}
// 弹出框
.dialog-center {
  text-align: center;
  overflow: hidden;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.1563rem;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #4d4d4d;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 0.0052rem solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    z-index: 9999;
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0.1563rem 0.1042rem;
  color: #606266;
  font-size: 0.0729rem;
  word-break: break-all;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 0.2396rem;
  padding: 0.1042rem 0.1042rem 0.0521rem;
  border-bottom: 0.0052rem solid #dddbdb;
}
::v-deep .el-dialog__title {
  font-size: 0.1042rem;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f6df1;
}
</style>
